@grid-maxRow: 10;
@grid-maxCol: 11;
@grid-buffer: 6;
@grid-boxRow: @grid-maxRow + @grid-buffer;
@pao-radius: 15px; //泡泡半径
@pao-size: @pao-radius * 2; //泡泡直径
@yd: (sqrt(3) * @pao-radius); //泡泡间距
// @colors: cyan, pink, purple, green, red, orange, blue, purple, yellow;
@colors: yellow, purple, green, red, blue;

.game-box {
  width: @pao-size* @grid-maxCol;
  height: calc(~"@{yd} * (@{grid-boxRow}) + @{pao-size}");

  .pao-container {
    width: @pao-size* @grid-maxCol;
    height: 100%;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    .pao {
      position: absolute;
      width: round(@pao-size);
      height: round(@pao-size);
      border-radius: 50%;
      font-size: 10px;
      line-height: round(@pao-size);
      text-align: center;
    }

    // 循环设置颜色
    // @icon-num: 10; //10种颜色
    @icon-num: 5; //5种颜色
    .set-bg(@x, @icon-num) when (@x <= @icon-num) {
      // 获取当前索引的颜色值
      @color: extract(@colors, @x);
      @selector: ~".pao-@{color}";
      @{selector} {
        background: @color;
      }
      .set-bg(@x + 1,@icon-num);
    }
    .set-bg(1, @icon-num);

    // 计算砖位置，两层循环
    .build-position(@x, @y) {
      // // 外层循环，判断 x 是否小于等于网格行数
      // & when (@x < @grid-maxRow) {
      //   // 内层循环，判断 y 是否小于等于网格列数
      //   & when (@y < @grid-maxCol) {
      //     // Less 不支持直接在类名中使用变量插值,使用~生成动态选择器
      //     @selector: ~".pao-position-@{x}-@{y}";
      //     @{selector} {
      //       left: @pao-size* @x;
      //       top: @pao-size* @y;
      //     }
      //     .build-position(@x, @y + 1);
      //   }
      //   // ❌.build-position(@x + 1, @y); //虽然你设置了 when (@x < @grid-maxRow) 条件，但 Less 并不会自动跳过不满足条件的递归调用。导致Maximum call stack size exceeded
      // }

      // 终止条件：当 x 或 y 超出范围时停止递归
      // 终止条件：x 或 y 超出范围时停止递归
      & when (@x <= @grid-boxRow) and (@y <= @grid-maxCol) {
        // 计算 top 值：垂直间距 = pao-radius * sqrt(3)
        @top-offset: calc(@yd * @x);
        // left 值：每列间隔一个泡泡大小
        @left-offset: calc(@pao-size * @y);
        // 如果是奇数行，则整体向右偏移半个泡泡宽度
        @odd-left-offset: calc(@left-offset + (@pao-size / 2));

        @selector1: ~".pao-position-@{x}-@{y}-even";
        @{selector1} {
          top: @top-offset;
          left: @left-offset;
        }

        @selector2: ~".pao-position-@{x}-@{y}";
        @{selector2} {
          // 偶数行
          top: @top-offset;
          left: @odd-left-offset;
        }

        // 情况1：先递增 y，如果 y+1 未超出列数
        & when (@y + 1 <= @grid-maxCol) {
          .build-position(@x, @y + 1);
        }

        // 情况2：y+1 超出列数时，换行（x+1, y=0）
        & when (@y + 1 >@grid-maxCol) and (@x + 1 <= @grid-boxRow) {
          .build-position(@x + 1, 0);
        }
      }
    }
    .build-position(0, 0);

    .pao-removed {
      animation: popRemoveAnimation 300ms ease-in-out forwards;
    }

    @keyframes popRemoveAnimation {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(0.5);
        opacity: 0.5;
      }

      100% {
        transform: scale(0);
        opacity: 0;
      }
    }

    .pao-droped {
      animation: dropAnimation 500ms linear forwards;
    }

    @keyframes dropAnimation {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }

      30% {
        transform: translateY(20px) scale(1.1); // 先放大再掉下去
        opacity: 0.8;
      }

      60% {
        transform: translateY(40px) scale(0.8);
        opacity: 0.6;
      }

      100% {
        transform: translateY(80px) scale(0);
        opacity: 0;
      }
    }
  }
}
